<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <input type="text" id="username">
    <input type="text" id="password">
    <input type="button" value="get登录" id="btn1">
    <input type="button" value="post注册" id="btn2">
</body>
<script>


    $("#btn1").onclick = function(){
        ajax({
            data:{
                username: $("#username").value,
                password: $("#password").value
            },
            url:"http://localhost:3000/login",
            success:(res)=>{
                // ajax执行成功
                console.log("成功：", res)
            },
            error:(code)=>{
                // ajax执行失败
                console.log("失败：", code)
            },
            timeout:12
        })
    }
    $("#btn2").onclick = function(){
        ajax({
            data:{
                username: $("#username").value,
                password: $("#password").value
            },
            url:"http://localhost:3000/register",
            type:"post",
            success:(res)=>{
                // ajax执行成功
                console.log( "成功：", res)
            },
            error:(code)=>{
                // ajax执行失败
                console.log( "失败：", code)
            },
            timeout:100
        })
    }


    function $(select){
        return document.querySelector(select)
    }


    function ajax({type='get', url, data={}, timeout=10000, success, error}={}){
        // 1. 解析数据
        let str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`;
        }
        // 2. 根据请求方式决定是否要拼接到url
        if(type === "get"){
            url += "?" + str.slice(0,-1);
        }
        // 3. 创建xhr对象
        const xhr = new XMLHttpRequest();
        xhr.timeout = timeout;
        // 4. 配置xhr对象
        xhr.open(type, url);
        // 5. 监听状态改变事件
        // xhr.onreadystatechange = function(){
        //     // 保证xhr自身的过程执行完毕，再通过http状态判断成功或失败
        //     if(xhr.readyState === 4 && xhr.status === 200){
        //         // 成功：携带响应数据
        //         success && success(xhr.responseText);
        //     }else if(xhr.readyState === 4 && xhr.status !== 200){
        //         // 失败：携带http的状态码
        //         error && error(xhr.status);
        //     }
        // }
        // 加载完成后触发load事件
        xhr.onload = function(){
            if(xhr.status === 200){
                success && success(xhr.responseText);
            }else{
                error && error(xhr.status);
            }
        }
        // xhr请求超时触发timeout事件
        xhr.ontimeout = function(){
            error && error("timeout");
            // 超时之后，中断请求
            xhr.abort();
        }
        // 6. 根据请求方式，决定xhr的启动时需要设置或携带的信息
        if(type === "get"){
            xhr.send();
        }else{
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send(str.slice(0,-1));
        }
    }
</script>
</html>